<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>打僵尸</title>
	<script src="/game/js/jquery-1.11.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="/home/css/index.css">
	<link rel="stylesheet" type="text/css" href="/game/build/css/layui.css">
 	<script src="/game/build/layui.js"></script>
	<link rel="stylesheet" href="/game/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="/game/css/zombies.css">
        <style>
          #score{
                        font-size: 30px;
                        text-align: center;
                }

                .big{
                        width: 100%;
                        height: 510px;
                        position: absolute;
                        background-image: url('/game/img/caodi.png');
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        overflow: hidden;
                        margin-top: 1px;
                        cursor:url('/game/img/cz.png'),auto;
                }

                .main{

                        position: relative;
                        height: 510px;
                        right: -1000px;


                }

                .row{
                        float: right;
                }

                .son{
                        width: 100px;
                        height: 100px;
                        /* border: 1px solid purple; */
                }

                .black{
                        width: 100px;
                        height: 100px;
                        /* border: 1px solid black; */
                        background-size: 99% 99%;
                        background-image:url('/game/img/jiangs.gif');
                        background-repeat: no-repeat;
                        background-position: center;
                }

                #name{
                        margin-left: 150px;
                        margin-top: 10px;
                }

        </style>
</head>
<body onselectstart="return false">

	@include('home/header')
	<hr>
	<div class ="big" >
         <div id="score" style="float:left; background:white;" class="layui-btn layui-btn-primary"><font color="red">0</font></div>
		<div class="main"></div>
	</div>
	
	
</body>
<script src="/game/bootstrap/js/bootstrap.min.js"></script>
<script>
    var user_id = '{{$user_id}}';
    var endhref = '{{$end_url}}';
    //初始状态
var state = true;//初始输赢状态
var speed = 2;//初始速度
var time = 50;//初始移动时间
var score = 0;//初始成绩为0
var clock;//用于存储定时器状态

//造一列div,并放入main里
function crow(){
	var row = $('<div class="row"></div>');
	$('.main').prepend(row);
	var num = Math.floor(Math.random()*5);
	for(var i = 0;i< 5; i++){
		if (i == num) {
				row.append('<div class="black" onclick="bian(this)"></div>');
				var k = Math.floor(Math.random()*1);
				k == 1 && $('.row')[0].children().css('background-image',"url('/game/img/jiang1.gif')");

		}else{
				row.append('<div class="son" onclick="bian(this)"></div>');	
		}
	}
}

//初始方块                                                                                                  
function init(){
	for (var i = 0; i < 13; i++) {
		crow();
	}
	clock = setInterval('move()', time);
}

//列div整体左移
//黑块到底的处理
function move(){
	var right = parseInt($('.main').css('right'));
	right = parseInt(right) + speed;
	$('.main').css('right',right+"px");

	if (right >= 0) {//主div到终点的状态
		//当最左侧到底,有黑块时,判断失败
		if($('.row:last').children().is('.black')){
			
			state = false;

			//ajax发送成绩
  			var end_score = {
  				'end_score' : score,
  				'user_id' : user_id,
  			};
  			$.post(endhref, end_score);

			clearInterval(clock);
			tanw();//失败弹窗
			
		}

		$('.row:last').remove(); //移除最后一列div
		crow();//在头部添加div
		$('.main').css('right',"-100px");//主div到最终点后,回到起点
	}
}

//黑白块转化
//误点白块的处理
//记录本次游戏分数与显示
function bian(event) { 
  		if($(event).attr('class') == "black"){
			$(event).attr('class','son');
			score++;//加分
			$('#score').text(score);//分数在页面显示
			if (speed < 100) {
				 speed = speed+0.1;
			}
		}else{
			if ($(event).attr('class') == "son") {//点击白块时的处理动作
  			
  			state = false;

  			//ajax发送成绩
  			var end_score = {
  				'end_score' : score
  			};
  			$.post(endhref, end_score);

			clearInterval(clock);
			tancao();//失败弹窗
			
			}
		}
}

//僵尸入侵失败弹窗
function tanw(){

    if(state == false){
      layui.use(['layer','form'],function(){
        var layer = layui.layer,form = layui.form();

		layer.open({
			  type: 1,
			  title: false,//不显示标题栏
			  closeBtn: false,
			  area: '300px;',
			  shade: 0.8,
			  id: 'LAY_layuipro', //设定一个id，防止重复弹出
			  resize: false,
			  btn: ['再来一局', '查看战绩'],
			  btnAlign: 'c',
			  moveType: 1, //拖拽模式，0或者1
			  content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">僵尸入侵了您的家园<br>您的分数为'+score+'</div>',

			  success: function(layero){
			    var btn = layero.find('.layui-layer-btn');

			    btn.find('.layui-layer-btn0').click(function(){
			     	window.location.reload();
			     	
			    });
			    
			    btn.find('.layui-layer-btn1').attr({
			    	href: 'http://meiqiu.yuanbuyu.com/', 
			    });
			  }
			});

        });
      } 
	}

	//弄坏草地失败弹窗
function tancao(){

    if(state == false){
      layui.use(['layer','form'],function(){
        var layer = layui.layer,form = layui.form();

		layer.open({
			  type: 1,
			  title: false,//不显示标题栏
			  closeBtn: false,
			  area: '300px;',
			  shade: 0.8,
			  id: 'LAY_layuipro', //设定一个id，防止重复弹出
			  resize: false,
			  btn: ['再来一局', '查看战绩'],
			  btnAlign: 'c',
			  moveType: 1, 
			  content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">您弄坏了自家的草地<br>您的分数为'+score+'</div>',
			  success: function(layero){
			    var btn = layero.find('.layui-layer-btn');

			    btn.find('.layui-layer-btn0').click(function(){
			     	window.location.reload();
				    });
			    
			    btn.find('.layui-layer-btn1').attr({
			    	href: 'http://meiqiu.yuanbuyu.com/',
			    });
			  }
			});

        });
      } 
	}

	//鼠标点击变换锤子角度
	$('div').mousedown(function(event) {
		$('.big').css("cursor", 'url(/game/img/cz2.png),auto');
	});
	$('div').mouseup(function(event){
		$('.big').css("cursor",'url(/game/img/cz.png),auto');
	});

init();

</script>
</html>
